<script setup>
import {ref,defineProps,defineEmits} from "vue";
import request  from '@/api/request'
import { Delete, Edit, Search, Plus, Refresh } from '@element-plus/icons-vue'
let emits=defineEmits(["ref-table"])
let onSubmit = () => {
     request({
        url: '/process/update',
        method: 'put',
        data: process.value
    }).then(res => {
         emits("ref-table")
    })
   
}
let processs = ref([])
let loadprocess = ()=>[
    // request.get('/Process/index').then(res=>{
    //     Processs.value = res.data;
    // })
]
loadprocess()
// 接收父组件传递的编辑数据
let props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});

//表单数据
let process = ref({
     ...props.data
});
process.value={...props.data}


import { useRouter } from "vue-router"
let isVisible = ref(false)
let zhuangtai=ref(false);
let router = useRouter();
let MaterialManagement=ref({})
let title = ref("")



// BOM datamaterialId
// const bomData = ref([
//   { id: 'YCL00053', name: '2883-3', spec: '', unit: 'PCS', ratio: 1, remark: '' },
//   { id: 'YCL00052', name: '2883-2', spec: '', unit: 'PCS', ratio: 1, remark: '' }
// ])

let sort = ref([])
let materialId = ref([])
let page = ref({
    current: 1,
    size: 2,
    total: 0,
    records: []
})


//加载数据表格

let loadData  = () => {
    request({
        url: '/detail/Name',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            detailId:process.value.processRouteId
        }
    }).then(res => {
        const sortValues = res.data.records.map(item => item.sort);
        const uniqueSortValues = [...new Set(sortValues)];
        if (sortValues.length !== uniqueSortValues.length) {
            console.warn('序号重复');
        }

        page.value.records.sort((a, b) => a.sort - b.sort)
        page.value = res.data
    }).catch(err => {
        ElMessage.error('数据加载失败')
    })
}

let data1 = ref(null)
loadData() 

let refTanle = () => {
    isVisible.value = false;
    
    loadData();
    loadData1();
}

let toInsert = () => {
    title.value = "添加工艺组成";
    isVisible.value = true;
    data1.value = process.value.processRouteId
    router.push("/material/process/insertdure");
}
let toUpdate = async(row) => {
    title.value = "修改工艺组成";
    isVisible.value = true;
    if(row!=null){
        data1.value=row;
    }else{
        data1.value=sort.value[0]
    }
    router.push("/material/process/updatedure");
}
//批量删除
let toRemove = () => {
    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        request({
            url: "/detail/delete",
            method: "delete",
            data: sort.value
        }).then(res => {
            ElMessage.success('删除成功')
            loadData()
    })
    })
}
//单删
let toRemoves = (id) => {
    sort.value=[id]   
    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        request({
            url: "/detail/delete",
            method: "delete",
            data: sort.value
        }).then(res => {
            ElMessage.success('删除成功')
            loadData()
    })
    })
}
let fuxuankuang=(a)=>{
    sort.value=a;
}



let page1 = ref({
    current: 1,
    size: 5,
    total: 0,
    records: []
})

let Material = ref({
   
    materialId: '',
    materialName: ''
})
Material.value={...props.data}
// 加载数据表格2

let loadData1 = () => {
    request({
        url: '/materialDetail/index',
        method: 'get',
        params: {
            current: page1.value.current,
            size: page1.value.size,
            processRouteId:Material.value.processRouteId,
            materialId:Material.value.materialId,
            materialName:Material.value.materialName
        }
    }).then(res => {
        page1.value = res.data
    }).catch(err => {
        ElMessage.error('数据加载失败')
    })
}

let data2 = ref(null)
loadData1() 


let toInsertMaterial = () => {
    title.value = "添加关联商品";
    isVisible.value = true;
    data1.value = process.value.processRouteId
    router.push("/material/process/insertmaterial");
}
let toUpdateMaterial = async(row) => {
    title.value = "修改关联商品";
    isVisible.value = true;
    if(row!=null){
        data1.value=row;        
    }else{
        data1.value=materialId.value[0] 
    }
    router.push("/material/process/updatematerial");
}


//批量删除
let toRemove1 = () => {
    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        request({
            url: "/materialDetail/delete",
            method: "delete",
            data: materialId.value
        }).then(res => {
            ElMessage.success('删除成功')
            loadData1()
    })
    })
}
//单删
let toRemoves1 = (id) => {
    materialId.value=[id] 
    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        request({
            url: "/materialDetail/delete",
            method: "delete",
            data: materialId.value
        }).then(res => {
            ElMessage.success('删除成功')
            loadData1()
    })
    })
}
let fuxuankuang1=(a)=>{
    materialId.value=a;
}


const handleSearch = () => {
    page1.value.current = 1;
    loadData1();
}

// 重置
let chongzhi = () => {
    Material.value = {
        materialId: '',
        materialName: ''
    }
 
}

</script>
<template>
    <div>
        <el-card >
            <template #header >
                <el-form :model="process" ref="form" label-width="80px" :inline="false"      class="card_wrap">
                    <el-form-item label="编号" class="c_item">
                        
                            
                            <el-input v-model="process.processRouteId" style="width: 150px;"disabled></el-input> <el-switch />
                    </el-form-item>
                    <el-form-item label="名称" class="c_item">
                           
                            <el-input v-model="process.processRouteName" style="width: 150px;"></el-input>
                    </el-form-item>
                         
                            <el-form-item label="是否启用" class="c_item">
                                
                                <el-radio-group v-model="process.isEnabled" >
                                    <el-radio label="是" :value="0">是</el-radio>
                                    <el-radio label="否" :value="1">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="备注" class="c_item_big">
                            
                            <el-input v-model="process.remark" placeholder="请输入内容" style="width: 800px;height: 60px;"></el-input>
                            </el-form-item>
                            <el-form-item label="说明" class="c_item_big">
                            
                            <el-input v-model="process.processRouteIllustrate" placeholder="请输入内容" style="width: 800px;height: 60px;"></el-input>
                            </el-form-item>







                            <el-tabs type="border-card"style="width: 100%">
                            <el-tab-pane label="组成工序">
                                <div style="margin-top: 20px;">
                                <el-button @click="toInsert" type="primary" :plain="true" icon="Plus">添加</el-button>
                                <el-button type="success" size="default" :plain=true @click="toUpdate(null)" icon="Plus" style="border:0px"
                                  :disabled="sort.length!=1" >修改</el-button>
                                <el-button type="danger" size="default" :plain=true @click="toRemove" icon="Delete" style="border:0px"
                                   :disabled=!sort >删除</el-button>
                            </div>
                                <el-table :data="page.records" border @selection-change="fuxuankuang">
                                    <el-table-column type="selection" width="55"></el-table-column>

                                    <el-table-column prop="sort" label="序号"  sortable type="index"></el-table-column>
                                    <el-table-column prop="processId" label="工序编码"></el-table-column>
                                    <el-table-column prop="psName" label="工序名称"></el-table-column>
                                    <el-table-column prop="processRelationship" label="与下一道工序关系"></el-table-column>
                                    
                                     <el-table-column prop="keyProcess" label="关键工序" #default="scope">
                                    <el-tag :type="scope.row.keyProcess=='0' ? 'primary':'danger'">{{ scope.row.keyProcess==0?"是":"否"}}</el-tag>
                                    </el-table-column>
                                    
                                    <el-table-column prop="qualityInspection" label="质检确认" #default="scope">
                                    <el-tag :type="scope.row.qualityInspection=='0' ? 'primary':'danger'">{{ scope.row.qualityInspection==0?"是":"否"}}</el-tag>
                                    </el-table-column>
                                    <el-table-column prop="preparationTime" label="准备时间"></el-table-column>
                                    <el-table-column prop="waitTime" label="等待时间"></el-table-column>
                                    <el-table-column label="操作" width="180px">
                                        <template #default="scope" label="操作">
                                            <el-button size="small" type="primary"  @click="toUpdate(scope.row)" :row="scope.row" :icon="Edit">修改</el-button>
                                            <el-button size="small" type="danger" @click="toRemoves(scope.row)" :icon="Delete">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-pagination @current-change="(val) => { page.current = val; loadData() }" 
                                v-model:currentPage="page.current"
                                :page-sizes="[2, 4, 6, 8, 10]" :page-size="page.size" :total="page.total" background>
                            </el-pagination>
                            </el-tab-pane>



                            <el-tab-pane label="关联产品">
                                 
                                <div style="margin-top: 20px;">
                                <el-button @click="toInsertMaterial" type="primary" :plain="true" icon="Plus">添加</el-button>
                                <el-button type="success" size="default" :plain=true @click="toUpdateMaterial(null)" icon="Plus" style="border:0px"
                                  :disabled="materialId.length!=1" >修改</el-button>
                                <el-button type="danger" size="default" :plain=true @click="toRemove1" icon="Delete" style="border:0px"
                                   :disabled=!materialId >删除</el-button>
                            </div>
                                <el-table :data="page1.records" border style="width: 100%" @selection-change="fuxuankuang1">
                                <el-table-column type="selection" width="55"></el-table-column>

                                <el-table-column prop="materialId" label="物料编码"></el-table-column>
                                <el-table-column prop="materialName" label="物料名称"></el-table-column>
                                <el-table-column prop="specificationsAndModels" label="规格"></el-table-column>
                                <el-table-column prop="unit" label="单位"></el-table-column>     
                                <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button size="small"  @click="toUpdateMaterial(scope.row)" :row="scope.row">修改</el-button>
                                <el-button size="small" type="danger" @click="toRemoves1(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                            <el-pagination @current-change="(val) => { page1.current = val; loadData1() }" 
                                v-model:currentPage="page1.current"
                                :page-sizes="[2, 4, 6, 8, 10]" :page-size="page1.size" :total="page1.total" background>
                            </el-pagination>
                            </el-tab-pane>
                           
                        </el-tabs> 
                            
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" class="right-bottom">确定修改</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-card>
        <div style="width:800px">
                        <el-dialog :title="title" v-model="isVisible" :destroy-on-close="true" width="60%">
                            <router-view @ref-table="refTanle":data1="data1">
                            </router-view>
                        </el-dialog>
                    </div>
    </div>
</template>
<style scoped>
.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/3);
    min-width: calc((100% - 10px)/3);
    max-width: calc((100% - 10px)/3);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
.c_item_big {
    flex: 2;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/1);
    min-width: calc((100% - 10px)/1);
    max-width: calc((100% - 10px)/1);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
.card_wrap {
    width: 98%;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.right-bottom{
 margin-top: 10px;
 margin-left: 850px ;
}
</style>